<template>
    <a-dropdown>
        <template #overlay>
            <a-menu>
                <a-menu-item>
                    <template #icon>
                        <SettingOutlined />
                    </template>
                    <span>个人设置</span>
                </a-menu-item>

                <a-menu-item @click="logout">
                    <template #icon>
                        <LogoutOutlined />
                    </template>
                    <span>退出登录</span>
                </a-menu-item>
            </a-menu>
        </template>
        <a-avatar shape="square" size="small">
            <template #icon>
                <UserOutlined />
            </template>
            Away
        </a-avatar>
    </a-dropdown>
</template>

<script lang="ts" setup>
import { UserOutlined, SettingOutlined, LogoutOutlined } from '@ant-design/icons-vue'
import { authManager } from '@/lib/auth'

const logout = async () => {
    await authManager.removeUser()
    await authManager.signoutRedirect()
}
</script>